<template>
  <div class="message">
    <header class="message_header">
      <BaseNavBar is-nav="true" :title="friend?.nickname" />
    </header>
    <main class="message_main">
      <section class="message_main_message" v-for="item in messageList" :key="item?.id"
        :style="{ alignSelf: item?.userId == user?.id ? 'end' : 'start' }">
        <section style="display: flex; justify-content: space-between;">
          <img :src="item?.userId == user?.id ? self?.avatar : friend?.avatar" class="message_main_message_avatar"
            :style="{ order: item?.userId == user?.id ? 2 : 1 }">
          <p class="message_main_message_content" :style="{ order: item?.userId == user?.id ? 1 : 2 }">{{ item?.content }}
          </p>
        </section>
        <p class="message_main_message_time" :style="{ justifyContent: item?.userId == user?.id ? 'start' : 'end' }">
          <span>{{ item?.createTime }}</span>
        </p>
      </section>
    </main>
    <footer class="message_footer">
      <van-cell-group>
        <van-field v-model="content" center type="textarea" clearable placeholder="请输入消息">
          <template #button>
            <van-button size="small" type="primary" @click="handleSend">发送消息</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute } from "vue-router";
import { showToast } from 'vant';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import { getMessageList, addMessage } from '@/apis/message';
import { getUserInfo } from '@/apis/user';

const route = useRoute();

const user = ref({});

const self = ref({});
const friend = ref({});

const messageList = ref([]);

const content = ref('');

let timer = null;

const init = () => {
  try {
    timer = setInterval(async () => {
      const res = await getMessageList({
        friendId: +route.params?.userId,
        pageNum: 1,
        pageSize: 9999
      });
      if (res?.code === 200) {
        messageList.value = res?.data?.list;
        self.value = res?.data?.userInfo;
        friend.value = res?.data?.friendInfo;
      }
    }, 2000);



  } catch (error) {
    console.log(error, 'init-error');

  }
};

const getUerInfo = async () => {
  try {
    const res = await getUserInfo();
    if (res?.code === 200) {
      user.value = res?.data;
    }
  } catch (error) {
    console.log(error, 'getUerInfo-error');

  }
}

const handleSend = async () => {
  try {
    const res = await addMessage({
      content: content.value,
      friendId: +route.params?.userId,
    });
    if (res?.code === 200) {
      content.value = '';
      init();
      return;
    }
    showToast(res?.msg);
  } catch (error) {
    console.log(error, 'handleSend-error');

  }
}

onMounted(() => {
  init();
  getUerInfo();
});

onBeforeUnmount(() => {
  clearInterval(timer);

});
</script>

<style lang="less" scoped>
.message {
  display: flex;
  flex-direction: column;

  &_main {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    &_message {
      max-width: 300px;
      margin-top: 8px;
      box-sizing: border-box;
      padding: 8px;
      background-color: #fff;
      border-radius: 4px;

      // align-self:end;
      &_avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      &_content {
        max-width: 240px;
        font-size: 14px;
        color: #666;
        word-wrap: break-word;

      }

      &_time {
        margin-top: 4px;
        font-size: 12px;
        color: #999;
        display: flex;
        // justify-content: start;
      }
    }
  }

  &_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
